<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片外层容器 -->
      <el-card shadow="never" class="card">
        <!-- 上半部分 -->
        <!-- 第一行 -->
        <el-row class="first-row" type="flex" justify="space-between">
          <el-col
            :span="12"
            class="first-left-col"
          ><span
            class="explain"
          >说明：目前支持学科和关键字条件筛选</span></el-col>
          <el-col
            :span="12"
            :push="10"
            class="first-right-col"
          ><el-button
            type="success"
            size="small"
            class="first-btn"
            @click="goAddquestionFn"
          ><i class="el-icon-edit" /> 新增试题</el-button></el-col>
        </el-row>

        <!-- 表单验证 -->
        <el-form ref="form" :model="formData" label-width="80px">
          <!-- 第二行 -->
          <el-row>
            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select v-model="formData.subjectID" placeholder="请选择">
                  <el-option
                    v-for="obj in subJectlist"
                    :key="obj.value"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 二级目录 -->
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="formData.catalogID" placeholder="请选择">
                  <el-option
                    v-for="obj in directorysList"
                    :key="obj.value"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="formData.tags" placeholder="请选择">
                  <el-option
                    v-for="obj in tagsList"
                    :key="obj.value"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="formData.keyword"
                  placeholder="请据题干搜索"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="formData.questionType" placeholder="请选择">
                  <el-option
                    v-for="obj in questionTypeList"
                    :key="obj.value"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="formData.difficulty" placeholder="请选择">
                  <el-option
                    v-for="obj in difficultyList"
                    :key="obj.value"
                    :label="obj.label"
                    :value="obj.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="formData.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in directionList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  v-model="formData.creatorID"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="obj in userlist"
                    :key="obj.id"
                    :label="obj.username"
                    :value="obj.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第四行 -->
          <el-row>
            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="formData.remarks" />
              </el-form-item>
            </el-col>
            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="formData.shortName" />
              </el-form-item>
            </el-col>
            <!-- 城市 -->
            <el-col :span="6">
              <el-form-item label="城市">
                <el-col :span="11">
                  <el-select
                    v-model="formData.province"
                    placeholder="请选择省份"
                    @change="provincesListEvent(formData.province)"
                  >
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-col>
                <el-col class="line" :span="2" />
                <el-col :span="11">
                  <el-select v-model="formData.city" placeholder="请选择城市">
                    <el-option
                      v-for="(item, index) in citysList"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <!-- 按钮 -->
            <el-col :span="6" :push="2">
              <el-form-item>
                <el-button size="small" @click="EmptyFn">清空</el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="SearchFn"
                >搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 标签页 -->
        <div>
          <el-tabs v-model="activeName" type="card" @tab-click="tabClickFn">
            <el-tab-pane label="全部" name="first"> 全部 </el-tab-pane>
            <el-tab-pane label="待审核" name="待审核"> 待审核 </el-tab-pane>
            <el-tab-pane label="已审核" name="通过"> 已审核 </el-tab-pane>
            <el-tab-pane label="已拒绝" name="拒绝"> 已拒绝 </el-tab-pane>
          </el-tabs>
        </div>
        <number-messages :total="counts" />
        <!-- 表格 -->
        <div class="table-questions">
          <el-table :data="choiceList" style="width: 100%">
            <el-table-column
              prop="number"
              label="试题编号"
              width="120"
            />
            <el-table-column
              prop="subject"
              label="学科"
              width="120"
            />
            <el-table-column
              prop="catalog"
              label="目录"
              width="120"
            />
            <el-table-column
              prop="questionType"
              label="题型"
              width="120"
              :formatter="fomatQuestionType"
            />
            <el-table-column prop="question" label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question" />
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="200" :formatter="fomatAddDate" />
            <el-table-column
              prop="difficulty"
              label="难度"
              width="100"
              :formatter="fomatDifficulty"
            />
            <el-table-column prop="creator" label="录入人" width="120" />
            <el-table-column
              prop="chkState"
              label="审核状态"
              width="120"
              :formatter="fomatChkState"
            />
            <el-table-column prop="chkRemarks" label="审核意见" width="150" />
            <el-table-column prop="chkUser" label="审核人" width="120" />
            <el-table-column prop="publishState" label="发布状态" width="120" :formatter="fomatPublishState" />
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewClick(scope.row)"
                >预览</el-button>
                <el-button type="text" size="small" :disabled="!(scope.row.chkState===0)" @click="checkFn(scope.row.id)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState===1" @click="editQuestionClick(scope.row.id)">修改</el-button>
                <el-button type="text" size="small" @click="batchClickFn(scope.row.id,scope.row.publishState)">{{ scope.row.publishState === 0? '上架':'下架' }}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState===1" @click="delChoice(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            :current-page="query.page"
            :page-size="query.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            layout="prev, pager, next,sizes, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 审核弹出框 -->
        <cHeck-diag v-if="checkDig" :check-dig-id="checkDigId" :dialog-visible="checkDig" @CheckChange="CheckChangeFn" @close="closeCheckDigFn" />
        <!-- 预览弹出框 -->
        <preview-diag v-if="PreviewShow" :preview-show="PreviewShow" :form="rowForm" @closePewDiag="PreviewShow =false" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { simple as Subjectlist } from '@/api/hmmm/subjects'
import { simple as directorysList } from '@/api/hmmm/directorys'
import { simple as tagsList } from '@/api/hmmm/tags'
import {
  difficulty,
  questionType,
  direction,
  chkType,
  DpublishType
} from '@/api/hmmm/constants'
import { simple as userList } from '@/api/base/users'
import { choice, choicePublish, choiceAdd } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'

import * as dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // import locale
dayjs().format()

dayjs.locale('zh-cn') // use locale
export default {
  name: 'Questionschoice',
  data() {
    return {
      formData: {
        subjectID: '', // 学科
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市省份
        city: '', // 城市
        tags: '', // 标签
        catalogID: '', // 目录
        chkState: '' // 审核状态
      },
      activeName: 'first', // 标签页当前
      query: {
        page: 1,
        pagesize: 5
      },
      counts: 0, // 总数量
      choiceList: [], // 表格数据渲染
      subJectlist: [], // 一级菜单学科
      directorysList: [], // 目录列表
      tagsList: [], // 标签列表
      difficultyList: difficulty, // 难度列表
      questionTypeList: questionType, // 是否是多选
      directionList: direction, // 方向
      userlist: [], // 录入人列表
      provincesList: provinces(), // 城市列表
      citysList: [], // 地区列表
      chkTypeList: chkType, // 审核列表
      DpublishTypeList: DpublishType, // 发布状态列表
      checkDig: false, // 审核弹出框
      checkDigId: 0, // 审核的ID
      PreviewShow: false, // 查看预览弹出窗
      rowForm: {}// 预览对象信息
    }
  },
  watch: {
    'formData.subjectID': async function() {
      this.formData.catalogID = ''
      this.formData.tags = ''
      const res = await directorysList({ subjectID: this.formData.subjectID })
      this.directorysList = res.data
      const res2 = await tagsList({ subjectID: this.formData.subjectID })
      this.tagsList = res2.data
    }
  },
  created() {
    // 调用获取精选题库列表方法
    this.choice()

    // 调用简单学科列表
    this.Subjectlist()

    // 调用录入人方法
    this.userList()

    // 把审核列表里的3=>0
    this.chkTypeList = this.chkTypeList.map((obj) => {
      if (obj.value === 3) {
        return {
          label: '待审核',
          value: 0
        }
      } else if (obj.value === 2) {
        return {
          label: '通过',
          value: 1
        }
      } else if (obj.value === 1) {
        return {
          label: '拒绝',
          value: 2
        }
      }
    })
  },

  methods: {
    // 点击修改 进入添加页面进行编辑上传
    editQuestionClick(id) {
      this.$router.push(`/questions/new?id=${id}`)
    },
    // 点击新增试题按钮
    goAddquestionFn() {
      this.$router.push('/questions/new')
    },

    // 点击显示预览弹出框
    previewClick(row) {
      this.PreviewShow = true
      this.rowForm = row
    },

    // 删除题库
    async delChoice(id) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'cancel') return this.$message('你已取消成功')
      await choiceAdd({ id: id, choiceState: 0 })
      this.$message.success('成功删除该文件')
      // 删除最后一页往前走
      if (this.choiceList.length === 1) {
        this.query.page--
        if (this.query.page === 0) {
          this.query.page = 1
        }
      }

      const newObj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          newObj[key] = this.formData[key]
        }
      }
      const res = await choice({ ...this.query, ...newObj })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    },

    // 审核成功后执行
    async CheckChangeFn() {
      this.checkDig = false
      const newObj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          newObj[key] = this.formData[key]
        }
      }
      const res = await choice({ ...this.query, ...newObj })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    },

    // 子组件点击取消关闭弹出框
    closeCheckDigFn() {
      this.checkDig = false
    },

    // 审核
    checkFn(Id) {
      this.checkDig = true
      this.checkDigId = Id
    },

    // 上下架
    async batchClickFn(Id, publishState) {
      const message = publishState === 0 ? '上架' : '下架'
      const result = await this.$confirm(`此操作将永久${message}该文件, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'cancel') return this.$message('你已取消成功')

      await choicePublish({ id: Id, publishState: publishState === 0 ? 1 : 0 })
      this.$message.success('成功' + message)
      const newObj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          newObj[key] = this.formData[key]
        }
      }
      const res = await choice({ ...this.query, ...newObj })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    },

    // 格式化发布状态
    fomatPublishState(row, column, cellValue, index) {
      const newObj = this.DpublishTypeList.find(
        (obj) => obj.value === Number(cellValue)
      )
      return newObj.label
    },

    // 格式化审核状态
    fomatChkState(row, column, cellValue, index) {
      const newObj = this.chkTypeList.find(
        (obj) => obj.value === Number(cellValue)
      )
      return newObj.label
    },

    // 格式化难度
    fomatDifficulty(row, column, cellValue, index) {
      const newObj = this.difficultyList.find(
        (obj) => obj.value === Number(cellValue)
      )
      return newObj.label
    },

    // 格式化录入时间
    fomatAddDate(row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },

    // 格式化题型
    fomatQuestionType(row, column, cellValue, index) {
      const newObj = this.questionTypeList.find(
        (obj) => obj.value === Number(cellValue)
      )
      return newObj.label
    },

    // 点击标签页的方法
    async tabClickFn() {
      const obj = this.chkTypeList.find((obj) => obj.label === this.activeName)
      if (obj) {
        this.formData.chkState = Number(obj.value)
        this.query.page = 1
        const newObj = {}
        for (const key in this.formData) {
          if (this.formData[key] || this.formData[key] === 0) {
            newObj[key] = this.formData[key]
          }
        }
        const res = await choice({ ...this.query, ...newObj })
        this.counts = res.data.counts
        this.choiceList = res.data.items
      } else {
        this.formData.chkState = ''
        this.query.page = 1
        const newObj = {}
        for (const key in this.formData) {
          if (this.formData[key]) {
            newObj[key] = this.formData[key]
          }
        }
        const res = await choice({ ...this.query, ...newObj })
        this.counts = res.data.counts
        this.choiceList = res.data.items
      }
    },

    // 清空搜索项
    EmptyFn() {
      this.formData = {
        subjectID: '', // 学科
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 城市省份
        city: '', // 城市
        tags: '', // 标签
        catalogID: '', // 目录
        chkState: '' // 审核状态
      }
    },

    // 搜索按钮
    async SearchFn() {
      this.query.page = 1
      this.query.pagesize = 5
      const newObj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          newObj[key] = this.formData[key]
        }
      }
      const res = await choice({ ...this.query, ...newObj })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    },

    // 城市变动获取地区
    provincesListEvent(value) {
      this.formData.city = ''
      const res = citys(value)
      this.citysList = res
    },

    // 获取录入人方法
    async userList() {
      const res = await userList()
      this.userlist = res.data
    },

    // 获取简单学科列表
    async Subjectlist() {
      const res = await Subjectlist()
      this.subJectlist = res.data
    },

    // 获取精选题库列表
    async choice() {
      const res = await choice({ ...this.query })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    },

    // 分页的方法
    async handleSizeChange(pagesize) {
      this.query.page = 1
      this.query.pagesize = pagesize
      const newObj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          newObj[key] = this.formData[key]
        }
      }
      const res = await choice({ ...this.query, ...newObj })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    },
    async handleCurrentChange(page) {
      this.query.page = page
      const newObj = {}
      for (const key in this.formData) {
        if (this.formData[key]) {
          newObj[key] = this.formData[key]
        }
      }
      const res = await choice({ ...this.query, ...newObj })
      this.counts = res.data.counts
      this.choiceList = res.data.items
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  float: right;
  padding: 20px;
  padding-right: 0;
}
.table-questions {
  margin-top: 20px;
}
.el-col.el-col-11 {
  margin-left: 5px;
}
.el-col-push-2 {
  left: 13.33333%;
}
.el-select.el-select--medium {
  width: 100%;
  height: 18px;
}
form.el-form {
  padding-top: 10px;
}
.el-col-push-10 {
  left: 44.3%;
}
.app-container {
  padding: 10px;
  .card {
    .first-row {
      margin-top: -5px;
      .first-left-col {
        .explain {
          font-size: 12px;
          color: #ffc0cb;
        }
      }
    }
  }
}
</style>
